<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title>Psychology Manage System</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/img/favicon.png">

    <link rel="stylesheet" href="assets/css/element.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">



    <!-- Main CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <script src="assets/util/localStorageUtil.js"></script>
    <script src="assets/util/request.js"></script>
    <script src="assets/util/common.js"></script>
    <script src="assets/js/element.js"></script>


    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->

    <style>
        .right{
            margin-top: 20px;
            border-radius: 10px;
            background-color: #fff;
        }
    </style>
</head>
<body>

<!-- Main Wrapper -->
<div class="main-wrapper" id="recordDetail">

    <!-- Header -->
    <div class="header">

        <!-- Logo -->
        <div class="header-left">
            <a href="profile.html" class="logo">
                <img src="assets/img/logo.png" alt="Logo">
            </a>
            <a href="profile.html" class="logo logo-small">
                <img src="assets/img/logo-small.png" alt="Logo" width="30" height="30">
            </a>
        </div>
        <!-- /Logo -->

        <!-- Sidebar Toggle -->
        <a href="javascript:void(0);" id="toggle_btn">
            <i class="fas fa-bars"></i>
        </a>
        <!-- /Sidebar Toggle -->

        <!-- Mobile Menu Toggle -->
        <a class="mobile_btn" id="mobile_btn">
            <i class="fas fa-bars"></i>
        </a>
        <!-- /Mobile Menu Toggle -->

        <!-- Header Menu -->
        <ul class="nav user-menu">

            <!-- Flag -->
            <li class="nav-item dropdown has-arrow flag-nav">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                    <img src="assets/img/flags/zh.png" alt="" height="20"> <span>简体中文</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="javascript:void(0);" class="dropdown-item">
                        <img src="assets/img/flags/zh.png" alt="" height="16"> 简体中文
                    </a>
                </div>
            </li>
            <!-- /Flag -->

            <!-- User Menu -->
            <li class="nav-item dropdown has-arrow main-drop">
                <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<span class="user-img">
								<img :src="userinfo.figureUrl==='' ? 'assets/img/logo-small.png': userinfo.figureUrl " alt="">
								<span class="status online"></span>
							</span>
                    <span v-html="userinfo.nickname"></span>
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="profile.html"><i data-feather="user" class="mr-1"></i> 个人中心</a>
                    <button class="dropdown-item" onclick="logout()"><i data-feather="log-out" class="mr-1"></i> 注销</button>
                </div>
            </li>
            <!-- /User Menu -->

        </ul>
        <!-- /Header Menu -->

    </div>
    <!-- /Header -->

    <!-- Sidebar -->
    <div class="sidebar">
        <div class="sidebar-inner slimscroll">
            <div id="sidebar-menu" class="sidebar-menu" >
                <ul id="sidebarMenu">
                </ul>
            </div>
        </div>
    </div>
    <!-- /Sidebar -->

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">

            <!-- Page Header -->
            <div class="page-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="page-title">个人中心</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="profile.html">个人中心</a>
                            </li>
                            <li class="breadcrumb-item active">个人中心</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="card">
                <div class="card-body" style="border-radius: 20px; background-color: white;line-height: 25px">
                    <h5>答题结果</h5>
                    <div >
                        <div v-for="(item,index) in judgeList" :index="index">
                            <i class="el-icon-chat-line-round"></i>  <strong>{{index+1}}、{{item.dimensionName}}.</strong>
                            <p style="text-indent:30px; color: 	#D19275">
                               <strong>{{item.judgeName}}</strong>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card right" >
                <div class="card-body" style="border-radius: 20px; background-color: white;">
                    <h5>答题记录</h5>
                    <el-form ref="form" :model="form" style="margin-top: 20px;text-align: left;">
                        <el-form-item v-for="(item ,index) in questionList" :key="index" :id="index">
                            <h5>{{index+1}}.{{item.questionName}}</h5>
                            <el-radio-group v-model="questionList[index].optionCode" >
                                <el-radio disabled v-for="op in item.optionList" :label="op.optionCode" @change="selectRadio(index)">{{op.optionCode}}. {{op.optionName}}</el-radio>
                            </el-radio-group>
                            <hr/>
                        </el-form-item>
                    </el-form>
                </div>
            </div>


        </div>
    </div>
    <!-- /Page Wrapper -->



</div>
<!-- /Main Wrapper -->

<!-- jQuery -->
<script src="assets/js/jquery-3.5.1.min.js"></script>

<!-- Bootstrap Core JS -->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- Feather Icon JS -->
<script src="assets/js/feather.min.js"></script>

<!-- Slimscroll JS -->
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Select2 JS -->
<script src="assets/plugins/select2/js/select2.min.js"></script>

<!-- Datepicker Core JS -->
<script src="assets/plugins/moment/moment.min.js"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js"></script>

<!-- Custom JS -->
<script src="assets/js/script.js"></script>

</body>

<script>

    let storage = new Storage();
    var profile = new Vue({
        el: '#recordDetail',
        data() {
            return {
                //初始页
                userinfo: {},
                judgeList: [],
                questionList: [],
                activePage: '/profile.html',
                loading: false,

            }
        },
        methods: {

            getUserInfo() {
                //设置用户信息
                if(storage.getItem("userinfo")!=null){
                    this.userinfo = storage.getItem("userinfo");
                    initMenu(storage.getItem("routeMap"),this.activePage)
                }else{
                    service.get("/user/getUserInfo").then(res=>{
                        storage.setItem({
                            name: "userinfo",
                            value: res.data.userinfo
                        })
                        storage.setItem({
                            name: "routeMap",
                            value: res.data.routeMap
                        })
                        initMenu(res.data.routeMap,this.activePage)
                        this.userinfo = res.data;
                    });
                }
            },

            getExamRecordDetail(){

                var recordId = getParam("recordId");
                service.get("/exam/getRecordDetail?recordId="+recordId).then(res=>{
                    this.judgeList = res.data.judgeList;
                    this.questionList = res.data.questionList;
                })

            }


        },
        created(){
            this.getExamRecordDetail();
        },
        mounted() {
            intThisPoint(this);
            this.getUserInfo();
        },
    })





</script>
</html>
